<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件传值</title>
</head>

<body>
    <div id="app">

        <test v-bind:moves="moves" :food="food"></test>
        <br>
        <test></test>
    </div>
    <template id="test">
        <div>
            <h4 v-for="(item,index) in moves">
                {{item}} {{index}}
            </h4>
            ==========================<br>
            <span v-for="(item,index) in food">
                {{item}} {{index}}<br>
            </span>
        </div>
    </template>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const test = {
            template: "#test",
            // props:["moves","food"]
            props: {             //可以设置一些默认值、是否是必传参数以及传输类型
                moves: {
                    type: Array,
                    default() {
                        return ["null"]
                    },
                    required: false
                },
                food: {
                    type: Array,    //类型为数组或对象(Object)的话默认值必须用函数返回
                    default() {
                        return ["null"]
                    },
                    required: false
                }
            }
        }

        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                moves: ["憨豆特工", "绿皮书", "大冒险", "..."],
                food: ["西红柿炒蛋", "牛排", "水煮鱼片", "..."]
            },
            components: {
                test    //ES6语法中，如果键值名字相同可以省略不写
            }
        })
    </script>
</body>

</html>